<template>
  <div class="app-container">
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-icon-document"
            >申请信息【{{ selectProcessInstance.name }}】</span
          >
        </div>
        <el-col :span="16" :offset="6">
          <div>
            <parser
              :key="new Date().getTime()"
              :form-conf="detailForm"
              @submit="submitForm"
            />
          </div>
        </el-col>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="el-icon-picture-outline">流程图</span>
        </div>
        <my-process-viewer
          key="designer"
          v-model="bpmnXML"
          v-bind="bpmnControlForm"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getProcessDefinitionBpmnXML } from "@/api/bpm/definition";
import { decodeFields } from "@/utils/formGenerator";
import Parser from "@/components/parser/Parser";
import { createProcessInstance } from "@/api/bpm/processInstance";
import { validateProcessUrl } from "@/api/bpm/definition";

// 流程实例的发起
export default {
  name: "ProcessPublishCreate",
  components: {
    Parser,
  },
  data() {
    return {
      // 流程表单详情
      detailForm: {
        fields: [],
      },

      // BPMN 数据
      bpmnXML: null,
      bpmnControlForm: {
        prefix: "flowable",
      },

      // 流程表单
      selectProcessInstance: {
        id: "B_2023_03_23_aQBwYH:1:6ec7c06e-c94e-11ed-bd0c-b06088e9c3ed",
        version: 1,
        name: "测试流程12-副本",
        description: "测试流程",
        category: "1",
        formType: 10,
        formId: 34,
        formConf:
          '{"formRef":"elForm","formModel":"formData","size":"medium","labelPosition":"right","labelWidth":100,"formRules":"rules","gutter":15,"disabled":false,"span":22,"formBtns":true}',
        formFields: [
          '{"__config__":{"label":"任务名","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","required":true,"layout":"colFormItem","span":11,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":531,"renderKey":"5311669368623739"},"__slot__":{"prepend":"","append":""},"placeholder":"请输入任务名","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"task_name"}',
          '{"__config__":{"label":"上报人","labelWidth":null,"showLabel":true,"changeTag":true,"tag":"el-input","tagIcon":"input","required":true,"layout":"colFormItem","span":11,"document":"https://element.eleme.cn/#/zh-CN/component/input","regList":[],"formId":532,"renderKey":"5321669368634945"},"__slot__":{"prepend":"","append":""},"placeholder":"请输入上报人","style":{"width":"100%"},"clearable":true,"prefix-icon":"","suffix-icon":"","maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"field532"}',
          '{"__config__":{"label":"任务详情","labelWidth":null,"showLabel":true,"tag":"el-input","tagIcon":"textarea","required":true,"layout":"colFormItem","span":22,"regList":[],"changeTag":true,"document":"https://element.eleme.cn/#/zh-CN/component/input","formId":533,"renderKey":"5331669368648433"},"type":"textarea","placeholder":"请输入任务详情","autosize":{"minRows":4,"maxRows":4},"style":{"width":"100%"},"maxlength":null,"show-word-limit":false,"readonly":false,"disabled":false,"__vModel__":"task_detail"}',
          '{"__config__":{"label":"上报事件","tag":"el-time-picker","tagIcon":"time","defaultValue":null,"span":22,"showLabel":true,"layout":"colFormItem","labelWidth":null,"required":true,"regList":[],"changeTag":true,"document":"https://element.eleme.cn/#/zh-CN/component/time-picker","formId":534,"renderKey":"5341669368660695"},"placeholder":"请选择上报事件","style":{"width":"100%"},"disabled":false,"clearable":true,"picker-options":{"selectableRange":"00:00:00-23:59:59"},"format":"HH:mm:ss","value-format":"HH:mm:ss","__vModel__":"field534"}',
        ],
        formCustomCreatePath: null,
        formCustomViewPath: null,
        suspensionState: 1,
        key: "B_2023_03_23_aQBwYH",
      }, // 选择的流程实例
    };
  },
  async created() {
    let shareCode = this.$route.query.shareCode;
    //this.getList();
    //初始化流程
    //debugger;
    // this.selectProcessInstance = this.$route.query.row;

    // 流程表单
    // 设置对应的表单
    await validateProcessUrl(shareCode).then((res) => {
      this.selectProcessInstance = res.data.processDefinition;
      this.detailForm = {
        ...JSON.parse(this.selectProcessInstance.formConf),
        fields: decodeFields(this.selectProcessInstance.formFields),
      };
      // this.bpmnXML =
      //   '<?xml version=\'1.0\' encoding=\'UTF-8\'?>\n<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:flowable="http://flowable.org/bpmn" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" typeLanguage="http://www.w3.org/2001/XMLSchema" expressionLanguage="http://www.w3.org/1999/XPath" targetNamespace="http://flowable.org/bpmn" id="diagram_Process_1679454148439">\n  <process id="B_2023_03_23_aQBwYH" name="测试流程12-副本" isExecutable="true">\n    <startEvent id="Event_047q8oz">\n      <extensionElements>\n        <flowable:formData />\n      </extensionElements>\n    </startEvent>\n    <userTask id="Activity_0big2ht" name="部长审核" xmlns:flowable="http://flowable.org/bpmn" flowable:roleIds="" flowable:deptIds="" flowable:userGroupIds="" flowable:userIds="119" flowable:postIds="" flowable:approverType="30" flowable:multiPersonApproval="Null">\n      <extensionElements>\n        <flowable:formData />\n      </extensionElements>\n    </userTask>\n    <sequenceFlow id="Flow_0rbjkpd" sourceRef="Event_047q8oz" targetRef="Activity_0big2ht" />\n    <endEvent id="Event_05oiqj5" />\n    <sequenceFlow id="Flow_1hincbn" sourceRef="Activity_0big2ht" targetRef="Event_05oiqj5" />\n  </process>\n  <bpmndi:BPMNDiagram id="BPMNDiagram_B_2023_03_23_aQBwYH">\n    <bpmndi:BPMNPlane bpmnElement="B_2023_03_23_aQBwYH" id="BPMNPlane_B_2023_03_23_aQBwYH">\n      <bpmndi:BPMNShape bpmnElement="Event_047q8oz" id="BPMNShape_Event_047q8oz">\n        <omgdc:Bounds height="36.0" width="36.0" x="142.0" y="372.0" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="Activity_0big2ht" id="BPMNShape_Activity_0big2ht">\n        <omgdc:Bounds height="80.0" width="100.0" x="230.0" y="350.0" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNShape bpmnElement="Event_05oiqj5" id="BPMNShape_Event_05oiqj5">\n        <omgdc:Bounds height="36.0" width="36.0" x="382.0" y="372.0" />\n      </bpmndi:BPMNShape>\n      <bpmndi:BPMNEdge bpmnElement="Flow_1hincbn" id="BPMNEdge_Flow_1hincbn">\n        <omgdi:waypoint x="330.0" y="390.0" />\n        <omgdi:waypoint x="382.0" y="390.0" />\n      </bpmndi:BPMNEdge>\n      <bpmndi:BPMNEdge bpmnElement="Flow_0rbjkpd" id="BPMNEdge_Flow_0rbjkpd">\n        <omgdi:waypoint x="178.0" y="390.0" />\n        <omgdi:waypoint x="230.0" y="390.0" />\n      </bpmndi:BPMNEdge>\n    </bpmndi:BPMNPlane>\n  </bpmndi:BPMNDiagram>\n</definitions>';
      // 加载流程图
      getProcessDefinitionBpmnXML(this.selectProcessInstance.id).then(
        (response) => {
          this.bpmnXML = response.data;
        }
      );
    });
  },
  methods: {
    /** 提交按钮 */
    submitForm(params) {
      if (!params) {
        return;
      }
      // 设置表单禁用
      const conf = params.conf;
      conf.disabled = true; // 表单禁用
      conf.formBtns = false; // 按钮隐藏

      // 提交表单，创建流程
      const variables = params.values;
      createProcessInstance({
        processDefinitionId: this.selectProcessInstance.id,
        variables: variables,
      })
        .then((response) => {
          this.$modal.msgSuccess("发起流程成功");
          // 关闭当前窗口
          //this.$tab.closeOpenPage();
          //this.$router.go(-1);
        })
        .catch(() => {
          conf.disabled = false; // 表单开启
          conf.formBtns = true; // 按钮展示
        });
    },
  },
};
</script>

<style lang="scss">
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>
